<script setup lang="ts">
import Tabs from '@/components/layouts/tabs/tabs.vue'
import Footer from './footer.vue'
import Loading from '@/components/loading.vue'
import FullscreenCloseButton from './fullscreen-close-button.vue'
import {
  useAppConfigStore,
  useAppConfigUserStore,
  useAuthMenuAndButtonStore
} from '@/stores'
const { isMaximize } = storeToRefs(useAppConfigStore())
const { layoutConfig } = storeToRefs(useAppConfigUserStore())
const { keepAliveRouterGet } = storeToRefs(useAuthMenuAndButtonStore())

// 刷新当前页面
const isRouterRefresh = ref(true)
const refreshCurrentPage = () => {
  isRouterRefresh.value = false
  nextTick(function () {
    isRouterRefresh.value = true
  })
}
provide('refresh', refreshCurrentPage) // 暴露给后代组件里面的刷新按钮触发刷新函数
</script>

<template>
  <!-- <div class="main-container"> -->
  <FullscreenCloseButton v-if="isMaximize" />
  <el-affix>
    <Tabs v-if="layoutConfig.showTabs"></Tabs>
  </el-affix>
  <el-main>
    <!-- <div class="main-container__main"> -->
    <router-view v-slot="{ Component, route }">
      <transition appear name="fade-transform" mode="out-in">
        <keep-alive v-if="isRouterRefresh">
          <component :is="Component" :key="route.path" />
        </keep-alive>
      </transition>
    </router-view>

    <!-- </div> -->
  </el-main>
  <!-- <Footer /> -->

  <!-- </div> -->
</template>

<style lang="scss" scoped>
// .main-container{
//   display: flex;
//   flex-direction: column;
//   &__main{
//     flex:1;
//     box-sizing: border-box;
//     padding: 10px 12px;
//     overflow-x: hidden;
//     background-color: var(--el-bg-color-page);
//     &::-webkit-scrollbar {
//       background-color: var(--el-bg-color-page);
//     }
//   }
// }
.el-main {
  // box-sizing: border-box;
  // padding: 10px 12px;
  height: calc(100% - 40px);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--el-bg-color-page);
  // &::-webkit-scrollbar {
  // 	background-color: #f0f2f5;
  // }
}
.el-footer {
  height: auto;
  padding: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s;
}
.fade-transform-enter-from {
  opacity: 0;
  transition: all 0.3s;
  transform: translateX(-30px);
}
.fade-transform-leave-to {
  opacity: 0;
  transition: all 0.3s;
  transform: translateX(30px);
}
</style>
